import Taro, { getCurrentInstance, Current } from '@tarojs/taro'
import React, { PureComponent } from 'react'
// 界面组件
import { View, Text, Button, Image } from '@tarojs/components'
import { AtTag, AtModal, AtModalHeader, AtModalContent, AtModalAction } from 'taro-ui'

import CTopbar from '@/components/CTopBar/index'
import CImage from '@/components/CImage/index'
import { get_consulting_info_api, isLike_api } from './service'
import './index.scss'
import GetTopBarInfo from '@/utils/GetTopBarInfo' //动态高度

import like from '@/assets/like.png'
import dislike from '@/assets/dislike.png'
/**
 * 咨询详情界面
 */

interface IConsultingInfo {
  address: string
  assistantPhone: string
  briefIntroduction: string
  employmentYear: number
  id: number
  isCollect: boolean
  price: number
  teacherType: number
  therapistImg: string
  therapistLabel: string
  therapistName: string
  time: number
  type: number
}
interface I {
  isOpenedONe: boolean
  isOpenedTwo: boolean
  id: string
  orderId: string
  consulting_info: IConsultingInfo
  isOrder: boolean
  system: string
  islike_status: boolean
}
interface ConsultingDetails {
  state: I
}

class ConsultingDetails extends PureComponent<any> {
  constructor(props) {
    super(props)
    this.state = {
      isOpenedONe: false,
      isOpenedTwo: false,
      id: '',
      consulting_info: {
        address: '玩儿玩儿',
        assistantPhone: '17588975773',
        briefIntroduction: '',
        employmentYear: 10,
        id: 12,
        isCollect: true,
        price: 20,
        teacherType: 2,
        therapistImg: 'http://pipe-oss.ydche.com/image/a3b633fd752249189d6cd88c09efc741微信图片_20200928145628.jpg',
        therapistLabel: '性格',
        therapistName: '李惠',
        time: 5,
        type: 1,
      },
      isOrder: false,
      system: '',
      islike_status: false,
    }
  }

  componentWillMount() {
    Taro.showLoading()
    const system = Taro.getStorageSync('system')
    const { id, isOrder } = Current.router?.params
    this.setState(
      {
        id,
        isOrder,
        system,
      },
      () => {
        this.get_consulting_info(Number(id))
      },
    )
  }

  get_consulting_info(id: number) {
    get_consulting_info_api(id).then(({ result, data }) => {
      Taro.hideLoading()
      this.setState({
        consulting_info: data,
      })
    })
  }
  reservationBtn() {
    const { system } = this.state
    if (system.indexOf('iOS') > 0) {
      Taro.showModal({
        title: '提示',
        content: '十分抱歉，由于相关规范，您暂时无法测试',
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定')
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        },
      })
    } else {
      this.setState({
        isOpenedONe: true,
      })
    }
  }
  isOK() {
    this.setState({
      isOpenedONe: false,
      isOpenedTwo: true,
    })
  }
  phone(phone: string) {
    Taro.makePhoneCall({
      phoneNumber: phone, //仅为示例，并非真实的电话号码
    })
  }
  isOKTwo() {
    const { id } = this.state
    this.setState({
      isOpenedTwo: false,
    })
    Taro.navigateTo({
      url: '/pages/Consulting/Reservation/index?id=' + id,
    })
  }
  isLike(id, type) {
    this.setState({
      islike_status: !this.state.islike_status,
    })
    isLike_api(id, type).then(({ result, data, message }) => {
      if (result < 0) {
        Taro.showToast({
          title: message,
          icon: 'none',
          duration: 2000,
        })
        return
      }
      this.get_consulting_info(id)
    })
  }
  render() {
    const consultTeacherTypeArr = ['', '高级', '资深', '主任', '专家']
    const { consulting_info, system, isOrder } = this.state
    return (
      <View style={{ paddingTop: `${GetTopBarInfo().TopBarHeight}px` }}>
        <View className='header'>
          <CTopbar title='详情' showBack></CTopbar>
        </View>
        <View className='content_3'>
          <View className='avatar'>
            <CImage src={consulting_info.therapistImg}></CImage>
          </View>
          <View className='userName'>{consulting_info.therapistName}</View>
          <View className='title'>国家{consultTeacherTypeArr[consulting_info.teacherType]}心理咨询师</View>
          <View className='tabs'>
            {!consulting_info.therapistLabel
              ? ''
              : consulting_info.therapistLabel.split(',').map((c, i) => {
                  return (
                    <AtTag key={i} circle>
                      {c}
                    </AtTag>
                  )
                })}
          </View>
          {system.indexOf('iOS') < 0 ? (
            <View className='price'>
              <Text>￥</Text>
              <Text>{consulting_info.price}</Text>
              <Text>/{consulting_info.time}分钟</Text>
            </View>
          ) : (
            <View className='price'>免费</View>
          )}
          <View className='like_wrapper' onClick={this.isLike.bind(this, consulting_info.id, 3)}>
            {consulting_info.isCollect ? <Image src={like} /> : <Image src={dislike} />}

            <Text className='likeStyle'>{consulting_info.isCollect ? '已关注' : '关注'}</Text>
          </View>
          <View className='introduction'>
            <View>
              <Text className='intro'>简介</Text>
            </View>
            <View className='titles'>个人简介</View>
            <View className='contenT'>
              {consulting_info.briefIntroduction ? (
                <View className='richtext' dangerouslySetInnerHTML={{ __html: consulting_info.briefIntroduction }}></View>
              ) : (
                ''
              )}
            </View>
            <View className='titles'>工作地点</View>
            <View className='address'>
              <View>工作地址:</View>
              <View>{consulting_info.address}</View>
            </View>

            <View className='titles'>咨询方式</View>
            <View className='way'>{consulting_info.type === 1 ? '线上' : '线下'}</View>
            <View className='assistant' onClick={this.phone.bind(this, consulting_info.assistantPhone)}>
              联系小助手
            </View>
          </View>
          {isOrder ? (
            ''
          ) : (
            <View className='footer'>
              <View onClick={this.reservationBtn.bind(this)}>
                {system.indexOf('iOS') < 0 ? '预约咨询￥' + consulting_info.price : '咨询'}
              </View>
            </View>
          )}
        </View>
        <AtModal isOpened={this.state.isOpenedONe} closeOnClickOverlay={false}>
          <AtModalHeader>咨询须知</AtModalHeader>
          <AtModalContent>
            <Text
              decode
              dangerouslySetInnerHTML={{
                __html:
                  ' 1、心理咨询的程序包括咨询预约、咨询登记、建立咨询关系，了解问题和分析诊断、心理咨询、回访调研等。\n2、心理咨询的时间，一般每次咨询五十分钟左右，两次咨询之间的时间间隔为一周。 \n3、心理咨询为什么收费？（1）心理咨询是咨询师帮助解决心理问题的过程，心理咨询师付出的劳动 和时间理应得到报酬。\n（2）有利于建立良好的咨询关系。咨询师收取咨询费后，自然就形成一种服务合同关系，既表明了求助者的诚意和信任，又赋予了咨询师义务和责任；求助者为节约时间必然会主动配合按时就诊，咨询师收取了费用后服务自然更心尽力，双方都能全身心地投入，咨询效果才能得到保证。\n（3）咨询收费本身有一定的心理治疗和不良人格矫治作用。心理咨询的过程需要咨询双方配合，共同付出努力，不收费的心理咨询，咨询者在接受治疗时主动自我探索和改变自己的动力往往不足，总希望咨询师舒舒服服地把困扰 \n3、心理咨询为什么收费？ \n（1）心理咨询是咨询师帮助解决心理问题的过程，心理咨询师付出的劳动 和时间理应得到报酬。\n（2）有利于建立良好的咨询关系。咨询师收取咨询费后，自然就形成一种服务合同关系，既表明了求助者的诚意和信任，又赋予了咨询师义务和责任；求助者为节约时间必然会主动配合按时就诊，咨询师收取了费用后服务自然更心尽力，双方都能全身心地投入，咨询效果才能得到保证。\n（3）咨询收费本身有一定的心理治疗和不良人格矫治作用。心理咨询的过程需要咨询双方配合，共同付出努力，不收费的心理咨询，咨询者在接受治疗时主动自我探索和改变自己的动力往往不足，总希望咨询师舒舒服服地把困扰',
              }}
            />
          </AtModalContent>
          <AtModalAction>
            <Button onClick={this.isOK.bind(this)}>我知道</Button>
          </AtModalAction>
        </AtModal>

        <AtModal isOpened={this.state.isOpenedTwo} closeOnClickOverlay={false}>
          <AtModalHeader>温馨提示</AtModalHeader>
          <AtModalContent>
            <Text
              decode
              dangerouslySetInnerHTML={{
                __html: `  购买成功，若希望取消咨询，请及时联系咨询助理，进行咨询的取消和费用的退还：\n
                 在约定咨询时间72小时前申请取消咨询，退还咨询费用的85%； 在约定咨询时间48小时前申请取消咨询，退还咨询费用的50%；\n
                 在约定咨询时间24小时前申请取消咨询，退还咨询费用的25%； 在约定咨询时间24小时内申请取消咨询，则不退费。\n
                 费用将在7个工作日内返还到原账户。`,
              }}
            />
          </AtModalContent>
          <AtModalAction>
            <Button onClick={this.isOKTwo.bind(this)}>我知道</Button>
          </AtModalAction>
        </AtModal>
      </View>
    )
  }
}

export default ConsultingDetails
